<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
      class="general-card"
      :title="$t('multiDAnalysis.card.title.dataOverview')"
      style="height: 700px"
    >
      <a-row justify="space-between">
        <a-col v-for="(item, idx) in renderData" :key="idx" :span="6">
          <a-statistic
            :title="item.title"
            :value="item.value"
            show-group-separator
            :value-from="0"
            animation
          >
            <template #prefix>
              <span
                class="statistic-prefix"
                :style="{ background: item.prefix.background }"
              >
                <component
                  :is="item.prefix.icon"
                  :style="{ color: item.prefix.iconColor }"
                />
              </span>
            </template>
          </a-statistic>
        </a-col>
      </a-row>

      <a-row justify="space-between">
        <a-col :span="12">
          <AgePie style="margin-top: 20px" />
        </a-col>
        <a-col :span="12">
          <SexPie style="margin-top: 20px" />
        </a-col>
      </a-row>

      <!--<AgeLine/>-->
      <!--<JobBar/>-->
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { LineSeriesOption } from 'echarts';
  import useLoading from '@/hooks/loading';
  import { ToolTipFormatterParams } from '@/types/echarts';
  import useThemes from '@/hooks/themes';
  import useChartOption from '@/hooks/chart-option';
  import questionDataSurveyStore from '@/store/modules/data-screen';
  import AgeLine from '@/views/data-screen/group-data/components/age-line.vue';
  import JobBar from '@/views/data-screen/group-data/components/job-bar.vue';
  import AgePie from '@/views/data-screen/group-data/components/age-pie.vue';
  import SexPie from '@/views/data-screen/group-data/components/sex-pie.vue';

  const questionData = questionDataSurveyStore();

  // const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  //   return items
  //     .map(
  //       (el) => `<div class="content-panel">
  //       <p>
  //         <span style="background-color: ${
  //           el.color
  //         }" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
  //       </p>
  //       <span class="tooltip-value">${el.value.toLocaleString()}</span>
  //     </div>`
  //     )
  //     .reverse()
  //     .join('');
  // };

  const generateSeries = (
    name: string,
    lineColor: string,
    itemBorderColor: string,
    data: number[]
  ): LineSeriesOption => {
    return {
      name,
      data,
      stack: 'Total',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 10,
      itemStyle: {
        color: lineColor,
      },
      emphasis: {
        focus: 'series',
        itemStyle: {
          color: lineColor,
          borderWidth: 2,
          borderColor: itemBorderColor,
        },
      },
      lineStyle: {
        width: 2,
        color: lineColor,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.1,
        color: lineColor,
      },
    };
  };
  const { t } = useI18n();
  // const { loading, setLoading } = useLoading(true);
  const { isDark } = useThemes();
  const fakeData = computed(() => [
    {
      title: '累积作答问卷数量',
      value: questionData.answer.total,
      prefix: {
        icon: 'icon-edit',
        background: isDark.value ? '#593E2F' : '#FFE4BA',
        iconColor: isDark.value ? '#F29A43' : '#F77234',
      },
    },
    {
      title: '累计作答题目数量',
      value: questionData.answer.time,
      prefix: {
        icon: 'icon-highlight',
        background: isDark.value ? '#3D5A62' : '#E8FFFB',
        iconColor: isDark.value ? '#6ED1CE' : '#33D1C9',
      },
    },
  ]);
  const renderData = computed(() => [
    {
      title: '答者总数',
      value: questionData.group.user,
      // value: 40,
      prefix: {
        icon: 'icon-edit',
        background: isDark.value ? '#593E2F' : '#FFE4BA',
        iconColor: isDark.value ? '#F29A43' : '#F77234',
      },
    },
    {
      title: '答者总数',
      // value: 40,
      value: questionData.group.questionnaire,
      prefix: {
        icon: 'icon-highlight',
        background: isDark.value ? '#3D5A62' : '#E8FFFB',
        iconColor: isDark.value ? '#6ED1CE' : '#33D1C9',
      },
    },

    {
      title: '群组成员总在线时长',
      value: questionData.group.time,
      prefix: {
        icon: 'icon-clock-circle',
        background: isDark.value ? '#3F385E' : '#F5E8FF',
        iconColor: isDark.value ? '#8558D3' : '#722ED1',
      },
    },
  ]);
  const xAxis = ref<string[]>([]);
  const contentProductionData = ref<number[]>([]);
  const contentClickData = ref<number[]>([]);
  const contentExposureData = ref<number[]>([]);
  const activeUsersData = ref<number[]>([]);
  // eslint-disable-next-line no-shadow
  const { chartOption } = useChartOption(() => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['10后', '00后', '90后', '80后', '70后'],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [
            {
              name: '10后',
              value: 18,
            },
            {
              name: '00后',
              value: 15,
            },
            {
              name: '90后',
              value: 5,
            },
            {
              name: '80后',
              value: 2,
            },
            {
              name: '70后',
              value: 0,
            },
          ],
        },
      ],
    };
  });
  const { loading } = useLoading(false);
</script>

<style scoped lang="less">
  :deep(.arco-statistic) {
    .arco-statistic-title {
      color: rgb(var(--gray-10));
      font-weight: bold;
    }

    .arco-statistic-value {
      display: flex;
      align-items: center;
    }
  }

  .statistic-prefix {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    color: var(--color-white);
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
  }
</style>
